<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/tools.js"></script>
    <script src="./js/api_v1.js"></script>
    <script src="./js/transImg.js"></script>
    <style>
        .body{
            background-color: rgb(239,241,240);
        }
        .body .content {
            width: 1200px;
            margin: 0 auto;
        }
        
        .body .body-banner{
            height: 450px;
            position: relative;
        }
        .body-sec {
            padding-top: 40px;
        }
        .body-sec ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .body-sec ul li {
            width: 290px;
            height: 366px;
            background-color: #fff;
            /* border: 1px solid red; */
        }
        .body-sec ul a {
            margin-top: 10px;
            display: block;
        }
        .body-sec ul a:hover {
            box-shadow: 1px 1px 1px #ccc,-1px -1px 1px #ccc,-1px 1px 1px #ccc,1px -1px 1px #ccc;
        }
        .body-sec ul li .body-sec-goods{
            height: 266px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border: 1px solid red; */
        }
        .body-sec ul li .body-sec-goods img {
            width: 226px;
            height: 226px;
        }
        .body-sec ul li .body-sec-details{
            color: black;
            padding-left: 30px;
        }
        .body-sec ul li .body-sec-details p:nth-of-type(2){
            color: red;
        }
        .body-sec .fl{
            float: left;
            font-size: 18px;
        } 
        .body-sec .fr{
            float: right;
        } 
        .body-sec .ff{
            height: 60px;
            line-height: 60px;
        }
        .item_clear::after{
            content: ".";
            /* 防止后期空字符类型造成网页影响 */
            display: block;
            /* 加的元素类型为行内元素，行内元素没有clear属性 */
            clear: both;
            /* 清除浮动 */
            height: 0px;
            /* 给添加的元素设置高度为0，让设置元素不占高度 */
            overflow: hidden;
            /* 高出父元素部分隐藏起来 */
            visibility: hidden;
            /* 防止overflow属性不生效 */
        }
        .body-sec .body-sec-banner .body-sec-transImg{
            height: 260px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="head-container">

    </div>
    <div class="body">
        <div class="body-banner" style="height: 450px;width: auto;">
            <div class="content">

            </div>
        </div>
        <div class="content">
            <div class="container">
                <section class="body-sec1 body-sec">
                    <div class="item_clear">
                        <p class="fl ff">新品推荐</p><p class="fr ff"><a href="./html/index/productList.html?typeId=typeid">查看更多></a></p>
                    </div>
                    <div class="body-sec-banner">
                    </div>
                    <ul>
                        <a href="javascript:;" pid="">
                            <li>
                                <div class="body-sec-goods">
                                    <img src="./uploads/20220209/1644391836.jpg" alt="">
                                </div>
                                <div class="body-sec-details">
                                    <p>手机苹果机</p>
                                    <p>￥11500</p>
                                </div>
                            </li>
                        </a>
                        <a href="javascript:;" pid="">
                            <li>
                                <div class="body-sec-goods">
                                    <img src="./uploads/20220209/1644391836.jpg" alt="">
                                </div>
                                <div class="body-sec-details">
                                    <p>手机苹果机</p>
                                    <p>￥11500</p>
                                </div>
                            </li>
                        </a>
                        <a href="javascript:;" pid="">
                            <li>
                                <div class="body-sec-goods">
                                    <img src="./uploads/20220209/1644391836.jpg" alt="">
                                </div>
                                <div class="body-sec-details">
                                    <p>手机苹果机</p>
                                    <p>￥11500</p>
                                </div>
                            </li>
                        </a>
                        <a href="javascript:;" pid="">
                            <li>
                                <div class="body-sec-goods">
                                    <img src="./uploads/20220209/1644391836.jpg" alt="">
                                </div>
                                <div class="body-sec-details">
                                    <p>手机苹果机</p>
                                    <p>￥11500</p>
                                </div>
                            </li>
                        </a>
                        
                    </ul>
                </section>
                <section class="body-sec2 body-sec">
    
                </section>
                <section class="body-sec3 body-sec">
    
                </section>
                <section class="body-sec4 body-sec">
    
                </section>
                <section class="body-sec5 body-sec">
    
                </section>
                <section class="body-sec6 body-sec">
    
                </section>
                <section class="body-sec7 body-sec">
    
                </section>
                <section class="body-sec8 body-sec">
                    
                </section>
            </div>
        </div>
    </div>
    <div class="footer-container">

    </div>
</body>
<script>
    async function reLoadHeader(){
        let headContent = document.querySelector(".head-container");
        const res = await loadHeader({});
        headContent.innerHTML = res ; 
    } 
    reLoadHeader();
</script>
<script>
    async function reLoadFooter(){
        const res = await loadFooter({});
        let footContent = document.querySelector(".footer-container");
        footContent.innerHTML = res;
        let weiboEles = document.querySelectorAll(".weibo");
        weiboEles.forEach(( item , key )=>{
            item.onmouseenter = function (){
                let x = this.offsetWidth ; 
                let y = this.offsetHeight ; 
                let divEle = document.createElement("div");
                divEle.style.position = "absolute" ;
                divEle.style.width = x + "px" ;
                divEle.style.height = x + "px" ;
                divEle.style.top = - x + "px" ; 
                if( key == 0 ){
                    divEle.style.backgroundImage = "url(./images/weibo.jpg)" ;
                } else if ( key == 1 ){
                    divEle.style.backgroundImage = "url(./images/weixin.jpg)" ;
                }
                divEle.style.backgroundSize = `${x}px ${x}px` ; 
                item.appendChild(divEle);
            }
            item.onmouseleave = function (){
                let divEle = this.querySelector("div");
                divEle.remove();
            }
        });
    } 
    reLoadFooter();
</script>
<script>
    window.onload = async function (){
        let bannerEle = $(".body > .body-banner");
        let res = await getList({opt:'getBanner'});
        let imgArr = res.map(item=>'./uploads/'+item['imgSrc']);
        let a = new TransImg(bannerEle,imgArr);
        console.log(a);
        let getTypeData = await getList({opt:'getTypeData'});
        let containerEle = $(".body .container");
        renderDom(containerEle,getTypeData);
        async function renderDom(ele,dataArr){
            ele.innerHTML = '' ;    
            for( let i = 0 ; i < dataArr.length ; i ++ ){
                let secEle = document.createElement("section");
                secEle.className = `body-sec${i+1} body-sec` ;
                let getGoodsData = await getList({opt:'getGoodsData',typeId:dataArr[i]['id']});
                let getTypeTransData = await getList({opt:'getTypeTransData',typeId:dataArr[i]['id']});
                // console.log(getTypeTransData);
                let str = '' ;
                getGoodsData.forEach((item,key)=>{
                    str += `<a href="javascript:;" pid="${item['id']}" class="to-detail">
                            <li>
                                <div class="body-sec-goods">
                                    <img src="./uploads/${item['img']}" alt="">
                                </div>
                                <div class="body-sec-details">
                                    <p>${item['pname']}</p>
                                    <p>￥${item['price']}</p>
                                </div>
                            </li>
                        </a>`;
                });
                if( getGoodsData.length != 0 ){
                    secEle.innerHTML = `
                        <div class="item_clear">
                            <p class="fl ff">${dataArr[i]['typeName']}</p><p class="fr ff"><a href="javascript:;" typeId="${dataArr[i]['id']}">查看更多></a></p>
                        </div>
                        <div class="body-sec-banner">
                        </div>
                        <ul>
                            ${str}
                        </ul>` ;
                        let toProListEle = secEle.querySelector(".fr a");
                        let aEles = secEle.querySelectorAll(".to-detail");
                        let bodyConEle = secEle.querySelector(".body-sec-banner");
                        if( getTypeTransData.length != 0 ){
                            let transConEle = document.createElement("div");
                            transConEle.className = "body-sec-transImg" ;
                            let bannerArr = getTypeTransData.map(item=>"./uploads/"+item['imgSrc']);
                            let b = new TransImg(transConEle,bannerArr);
                            console.log(b);
                            bodyConEle.appendChild(transConEle);
                        }
                        toProListEle.onclick = function (){
                            let typeId = this.getAttribute("typeId");
                            window.location.href = './html/index/productList.html?typeId='+typeId ; 
                        }
                        aEles.forEach((aEle)=>{
                            aEle.onclick = function (){
                                let pid = this.getAttribute("pid");
                                window.location.href = './html/index/proDetail.html?pid='+pid ; 
                            }
                        });
                    ele.appendChild(secEle);
                }
            }
        }
    }
    
</script>
</html>